﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购物车_蜗牛图书商城</title>
		<link type="text/css" rel="stylesheet" href="css/index.css">
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			// $(function(){
			//
			// 	function checkeALL() {
			// 		if(!document.getElementById("selAll").checked==false){
			// 			$("tbody input").prop("checked","checkeds");
			// 		}else{
			// 			$("tbody input").prop("checked","");
			// 		}
			//
			// 	}
			// 	document.getElementById("selAll").addEventListener('click',checkeALL);
			//
			// });
		</script>
	</head>

	<body class="second">
		<div class="brand_list container_2">
			<div class="header" id="header">
				<h1 class="logo">
			<a title="" style="background:url(images/logo.png);" href="index.jsp">电子商务平台</a>
		</h1>
				<!-- <ul class="shortcut">
			<li class="first"><a href="personal.html">个人中心</a></li>
			<li><a href="myOrders.html">我的订单</a></li>
		</ul>
		<p class="loginfo">

				laotan！您好，欢迎您来到购物！[<a
					href="user?opr=logout" class="reg">安全退出</a>]


		</p> -->
		<div id="login"></div>
				<script>
					let user =  window.sessionStorage.getItem("user");
					if(user!=undefined){
						var $ul="<ul class=\"shortcut\">\n" +
								"        <li class=\"first\"><a href=\"personal.html\">个人中心</a></li>\n" +
								"        <li><a href=\"myOrders.html\">我的订单</a></li>\n" +
								"        <p class=\"loginfo\">你好!"+""+"[<a href=\"javaScript:logout()\">安全退出</a>]</p>\n" +
								"    </ul>";

						$("#login").html($ul);


					}else{
						var $p="<p class=\"loginfo\">\n" +
								"        [<a href=\"login.html\">登录</a> <a class=\"reg\" href=\"adduser.html\">免费注册</a>]\n" +
								"    </p>";
						$("#login").html($p);
					}
				</script>
<!--				<ul class="shortcut">-->
<!--					<li class="first">-->
<!--						<a href="personal.html">个人中心</a>-->
<!--					</li>-->
<!--					<li>-->
<!--						<a href="myOrders.html">我的订单</a>-->
<!--					</li>-->
<!--				</ul>-->
<!--				<p class="loginfo">你好!17760990684[-->
<!--					<a href="javaScript:logout()">安全退出</a>]</p>-->
			</div>
			<div class="wrapper clearfix">
				<div class="position mt_10">
					<span>您当前的位置：</span>
					<a href="index.jsp"> 首页</a> » 购物车
				</div>
				<div class="myshopping m_10">
					<ul class="order_step">
						<li class="current"><span class="first">1、查看购物车</span></li>
						<li><span>2、填写核对订单信息</span></li>
						<li class="last"><span>3、成功提交订单</span></li>
					</ul>
				</div>
				<!-- <form action="order" id="form1" method="post"> -->
				<input type="hidden" name="opr" value="initadd">
				<table width="100%" class="cart_table m_10">
					<colgroup>
						<col width="65px">
						<col width="115px">
						<col width="400px">
						<col width="80px">
						<col width="80px">
						<col width="80px">
					</colgroup>
					<caption>查看购物车</caption>
					<thead>
						<tr>
							<th><input type="checkbox" id="selAll">&nbsp;全选</th>
							<th>图片</th>
							<th>商品名称</th>
							<th>单价</th>
							<th>数量</th>
							<th>小计</th>
							<th class="last">操作</th>
						</tr>
					</thead>
					<tbody id="bookList">
<!--						<tr>-->
<!--							<td><input type="checkbox" name="goodsid" value="544"></td>-->
<!--							<td><img src="images/goods/3b03575dd0054548bda655c97e900951.jpg" width="66px" height="66px" alt="生活需要仪式感2（把温暖和感动带给你在乎的人） 给生活一点仪式感，幸福感也将随之而来。你想念的人和事，都能在仪式里相逢。数十位明星大咖口口相传，上万家主流媒体感动推荐。不容错过的影响力佳作系列！拥有仪式感，生活更美满。" title="生活需要仪式感2（把温暖和感动带给你在乎的人） 给生活一点仪式感，幸福感也将随之而来。你想念的人和事，都能在仪式里相逢。数十位明星大咖口口相传，上万家主流媒体感动推荐。不容错过的影响力佳作系列！拥有仪式感，生活更美满。"></td>-->
<!--							<td class="t_l">-->
<!--								<a href="goods?opr=view&amp;id=544" class="blue">生活需要仪式感2（把温暖和感动带给你在乎的人） 给生活一点仪式感，幸福感也将随之而来。你想念的人和事，都能在仪式里相逢。数十位明星大咖口口相传，上万家主流媒体感动推荐。不容错过的影响力佳作系列！拥有仪式感，生活更美满。</a>-->
<!--							</td>-->
<!--							<td>￥<b id="goods_price_544">10</b></td>-->
<!--							<td>-->
<!--								<div class="num">-->
<!--									<a class="reduce" href="javascript:void(0)" data-id="544">-</a> <input name="num" class="tiny" value="1" data-id="544" type="text" id="goods_num_544">-->
<!--									<a class="add" href="javascript:void(0)" data-id="544">+</a>-->
<!--								</div>-->
<!--							</td>-->
<!--							<td>￥<b class="red2" id="goods_sum_544">10</b></td>-->
<!--							<td>-->
<!--								<a href="javascript:void(0)" onclick="">删除</a>-->
<!--							</td>-->
<!--						</tr>-->
<!--						<tr>-->
<!--							<td><input type="checkbox" name="goodsid" value="2"></td>-->
<!--							<td><img src="images/goods/a07b001aac1c47d4828a3cd7a8566cc8.jpg" width="66px" height="66px" alt="IT运维之道 第2版 讲述IT服务标准 架构 体系和方法 IT软件开发技能技巧培训 学会一套成熟 规范 有效的IT运维方法 系统运维管理书籍" title="IT运维之道 第2版 讲述IT服务标准 架构 体系和方法 IT软件开发技能技巧培训 学会一套成熟 规范 有效的IT运维方法 系统运维管理书籍"></td>-->
<!--							<td class="t_l">-->
<!--								<a href="goods?opr=view&amp;id=2" class="blue">IT运维之道 第2版 讲述IT服务标准 架构 体系和方法 IT软件开发技能技巧培训 学会一套成熟 规范 有效的IT运维方法 系统运维管理书籍</a>-->
<!--							</td>-->
<!--							<td>￥<b id="goods_price_2">48</b></td>-->
<!--							<td>-->
<!--								<div class="num">-->
<!--									<a class="reduce" href="javascript:void(0)" data-id="2">-</a> <input name="num" class="tiny" value="1" data-id="2" type="text" id="goods_num_2">-->
<!--									<a class="add" href="javascript:void(0)" data-id="2">+</a>-->
<!--								</div>-->
<!--							</td>-->
<!--							<td>￥<b class="red2" id="goods_sum_2">48</b></td>-->
<!--							<td>-->
<!--								<a href="javascript:void(0)" onclick="">删除</a>-->
<!--							</td>-->
<!--						</tr>-->
<!--						<tr>-->
<!--							<td><input type="checkbox" name="goodsid" value="6"></td>-->
<!--							<td><img src="images/goods/1517d9077ee845dbb2ec0d6e758f90a6.jpg" width="66px" height="66px" alt="IT真相：打通IT与商务的通路 IT行业企业管理必备，让IT与商务衔接更加紧密！ 以苹果公司为例，深刻解读IT与商务的全新商业模式！" title="IT真相：打通IT与商务的通路 IT行业企业管理必备，让IT与商务衔接更加紧密！ 以苹果公司为例，深刻解读IT与商务的全新商业模式！"></td>-->
<!--							<td class="t_l">-->
<!--								<a href="goods?opr=view&amp;id=6" class="blue">IT真相：打通IT与商务的通路 IT行业企业管理必备，让IT与商务衔接更加紧密！ 以苹果公司为例，深刻解读IT与商务的全新商业模式！</a>-->
<!--							</td>-->
<!--							<td>￥<b id="goods_price_6">32</b></td>-->
<!--							<td>-->
<!--								<div class="num">-->
<!--									<a class="reduce" href="javascript:void(0)" data-id="6">-</a> <input name="num" class="tiny" value="1" data-id="6" type="text" id="goods_num_6">-->
<!--									<a class="add" href="javascript:void(0)" data-id="6">+</a>-->
<!--								</div>-->
<!--							</td>-->
<!--							<td>￥<b class="red2" id="goods_sum_6">32</b></td>-->
<!--							<td>-->
<!--								<a href="javascript:void(0)" onclick="">删除</a>-->
<!--							</td>-->
<!--						</tr>-->
<!--						<tr>-->
<!--							<td><input type="checkbox" name="goodsid" value="183"></td>-->
<!--							<td><img src="images/goods/e743f8cae73a45cfa09cf6d5118ca555.jpg" width="66px" height="66px" alt="国际大奖小说（全6册）-蒲公英儿童文学馆出品 （新老版本交替发货）含喝月亮的女孩、蓝色星星的孩子国、柴郡猫传奇、报童的夏天、男孩与熊漂流记及天堂里的海龟。当代大奖儿童文学；马爱农、舒杭丽、肖毛、陈静抒奉献精良译文。（蒲公英童书馆出品）" title="国际大奖小说（全6册）-蒲公英儿童文学馆出品 （新老版本交替发货）含喝月亮的女孩、蓝色星星的孩子国、柴郡猫传奇、报童的夏天、男孩与熊漂流记及天堂里的海龟。当代大奖儿童文学；马爱农、舒杭丽、肖毛、陈静抒奉献精良译文。（蒲公英童书馆出品）"></td>-->
<!--							<td class="t_l">-->
<!--								<a href="goods?opr=view&amp;id=183" class="blue">国际大奖小说（全6册）-蒲公英儿童文学馆出品 （新老版本交替发货）含喝月亮的女孩、蓝色星星的孩子国、柴郡猫传奇、报童的夏天、男孩与熊漂流记及天堂里的海龟。当代大奖儿童文学；马爱农、舒杭丽、肖毛、陈静抒奉献精良译文。（蒲公英童书馆出品）</a>-->
<!--							</td>-->
<!--							<td>￥<b id="goods_price_183">182</b></td>-->
<!--							<td>-->
<!--								<div class="num">-->
<!--									<a class="reduce" href="javascript:void(0)" data-id="183">-</a> <input name="num" class="tiny" value="1" data-id="183" type="text" id="goods_num_183">-->
<!--									<a class="add" href="javascript:void(0)" data-id="183">+</a>-->
<!--								</div>-->
<!--							</td>-->
<!--							<td>￥<b class="red2" id="goods_sum_183">182</b></td>-->
<!--							<td>-->
<!--								<a href="javascript:void(0)" onclick="">删除</a>-->
<!--							</td>-->
<!--						</tr>-->
<!--						<tr>-->
<!--							<td><input type="checkbox" name="goodsid" value="543"></td>-->
<!--							<td><img src="images/goods/8717a88c77ee4584b0bd01812f639423.jpg" width="66px" height="66px" alt="生活需要高级感：唤醒你心中热爱生活的力量 人民日报推荐！写给现代女性的觉醒之书！真正的高级，不是物质的堆砌，而是找到内心的爱与自由。董卿、刘雯等众多名人都在实践的自我革新方式，从细节出发，让你方方面面升级换代，给不甘平凡的你，高配生活法则。" title="生活需要高级感：唤醒你心中热爱生活的力量 人民日报推荐！写给现代女性的觉醒之书！真正的高级，不是物质的堆砌，而是找到内心的爱与自由。董卿、刘雯等众多名人都在实践的自我革新方式，从细节出发，让你方方面面升级换代，给不甘平凡的你，高配生活法则。"></td>-->
<!--							<td class="t_l">-->
<!--								<a href="goods?opr=view&amp;id=543" class="blue">生活需要高级感：唤醒你心中热爱生活的力量 人民日报推荐！写给现代女性的觉醒之书！真正的高级，不是物质的堆砌，而是找到内心的爱与自由。董卿、刘雯等众多名人都在实践的自我革新方式，从细节出发，让你方方面面升级换代，给不甘平凡的你，高配生活法则。</a>-->
<!--							</td>-->
<!--							<td>￥<b id="goods_price_543">34</b></td>-->
<!--							<td>-->
<!--								<div class="num">-->
<!--									<a class="reduce" href="javascript:void(0)" data-id="543">-</a> <input name="num" class="tiny" value="1" data-id="543" type="text" id="goods_num_543">-->
<!--									<a class="add" href="javascript:void(0)" data-id="543">+</a>-->
<!--								</div>-->
<!--							</td>-->
<!--							<td>￥<b class="red2" id="goods_sum_543">34</b></td>-->
<!--							<td>-->
<!--								<a href="javascript:void(0)" onclick="">删除</a>-->
<!--							</td>-->
<!--						</tr>-->
<!--						<tr class="stats">-->
<!--							<td colspan="8">金额总计（不含运费）：￥<b class="orange" id="totalmoney">0.00</b></td>-->
<!--						</tr>-->
					</tbody>
					<tfoot>
						<tr>
							<td colspan="2" class="t_l"></td>
							<td colspan="6" class="t_r">
								<a class="btn_continue" href="index.jsp">继续购物</a>
								<a class="btn_pay" href="javaScript:finish()">去结算</a>
							</td>
						</tr>
					</tfoot>
				</table>
				<!-- </form> -->
				<div class="box">
					<div class="title">热门商品推荐</div>
				</div>
				<ul id="scrollpic" class="prolist">

				</ul>
			</div>
			<div class="footer">
				<p class="links">
					<a href="">关于我们</a>|
					<a href="">常见问题</a>|
					<a href="">安全交易</a>|
					<a href="">购买流程</a>|
					<a href="">如何付款</a>|
					<a href="">联系我们</a>|
					<a href="">合作提案</a>
				</p>
				Copyright © 2015-2021
				<a class="copyys" target="_blank" href="">蜀ICP备01000010号</a>
			</div>
		</div>
	<script src="js/jquery-3.6.0.js"></script>
	<script src="js/include.js"></script>
	<script>
		$(function () {
			function checkeALL() {
				if(!document.getElementById("selAll").checked==false){
					$("tbody input").prop("checked","checkeds");
				}else{
					$("tbody input").prop("checked","");
				}
			}
			var user=JSON.parse(window.sessionStorage.getItem("user"));
			$.ajax({
				url:"Cart.do",
				data:{
					method:"findByCart",
					userid:user.id,
				},
				type:"get",
				dataType:"json",
				success:function(result){
					if(user){
					if(result.code==200){
						for(let i=0;i<result.data.length;i++){
							// alert(${result.data[i].goods.id});
							var tr=`
									<tr name="sum">
									<td><input type="checkbox" name="goodsid" value="${result.data[i].id}"></td>
\t\t\t\t\t\t\t<td><img src="${result.data[i].goods.image}" width="66px" height="66px" alt="${(result.data[i].goods.name)}" title="${result.data[i].goods.name}"></td>
\t\t\t\t\t\t\t<td class="t_l">
\t\t\t\t\t\t\t\t<a href="goodsDetail.html?id=${result.data[i].goods.id}" class="blue">${result.data[i].goods.name}</a>
\t\t\t\t\t\t\t</td>
\t\t\t\t\t\t\t<td>￥<b id="goods_price_${result.data[i].id}">${result.data[i].goods.salesprice}</b></td>
\t\t\t\t\t\t\t<td>
\t\t\t\t\t\t\t\t<div class="num">
\t\t\t\t\t\t\t\t\t<a class="reduce" href="javascript:void(0)" data-id="${result.data[i].id}">-</a> <input name="num" class="tiny" value="1" data-id="${result.data[i].id}" type="text" id="goods_num_${result.data[i].id}">
\t\t\t\t\t\t\t\t\t<a class="add" href="javascript:void(0)" data-id="${result.data[i].id}">+</a>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</td>
\t\t\t\t\t\t\t<td>￥<b class="red2" id="goods_sum_${result.data[i].id}">${(result.data[i].goods.salesprice)*1}</b></td>
\t\t\t\t\t\t\t<td>
\t\t\t\t\t\t\t\t<a href="javascript:void(0)" class="delete" data-id="${result.data[i].id}" id="delete_${result.data[i].id}">删除</a>
\t\t\t\t\t\t\t</td>
				</tr>				`;
							$("#bookList").append(tr);
						}
						let stats=`
					<tr class="stats">
\t\t\t\t\t\t\t<td colspan="8">金额总计（不含运费）：￥<b class="orange" id="totalmoney">0.00</b></td>
\t\t\t\t\t\t</tr>
					`;
						$("#bookList").append(stats);
					}
				}else{
						$("")
						alert("未登录！")
					}
				}
			})
			//全选
			$("#selAll").on("click",function (event) {
				console.log($(".red2").text())
				console.log($(".red2").text().split("."))
					console.log($(".red2").text().split(".")[0])
				console.log($(".red2").text().split(".").length)
				if(event.target.checked){
					// $("#sum").forEach();
				}
			})
			//单选和添加减少
			$("#bookList").on("click",function (event) {
				var len=0;
				if(event.target.name=="goodsid"){
			     	if(event.target.checked){
						len=parseFloat($("#goods_sum_"+event.target.value).text());
						$("#totalmoney").text((parseFloat($("#totalmoney").text())+len).toFixed(2));
					}else{
						len=parseFloat($("#goods_sum_"+event.target.value).text());
						$("#totalmoney").text((parseFloat($("#totalmoney").text())-len).toFixed(2));
					}
				}else if(event.target.className=="reduce"){

					let num=$("#goods_num_"+event.target.dataset.id).val();
					let lem=parseInt($("#goods_num_"+event.target.dataset.id).val(num-1));
					$("#goods_sum_"+event.target.dataset.id).text(
							parseFloat($("#goods_sum_"+event.target.dataset.id).text())
												-
							parseFloat($("#goods_price_"+event.target.dataset.id).text())
					).toFixed(2)
					if(num<1){
						let ids=event.target.dataset.id;
						console.log(ids);
						event.target.parentElement.parentElement.parentElement.parentElement.removeChild(event.target.parentElement.parentElement.parentElement);
						del(ids);
						return;
					}
				}else if(event.target.className=="add"){
					let num=$("#goods_num_"+event.target.dataset.id).val();
					$("#goods_num_"+event.target.dataset.id).val(parseInt(num)+1);
					let price=parseFloat($("#goods_price_"+event.target.dataset.id).text());
					parseInt($("#goods_num_"+event.target.dataset.id).val());
					$("#goods_sum_"+event.target.dataset.id).text(
							parseFloat($("#goods_sum_"+event.target.dataset.id).text())+price
					).toFixed(2);
				}else if(event.target.className=="delete"){
								let ids=event.target.dataset.id;
					console.log(ids);
					event.target.parentElement.parentElement.parentElement.removeChild(event.target.parentElement.parentElement);
					del(ids)
				}
			})
		// })
		function del(ids) {
			//删除
			$.ajax({
				url:"Cart.do",
				data: {
					method: "delete",
					id:ids,
				},
				dataType: "json",
				type: "get",
				success:function (result) {

				}
			})
		}
		// 	$("#bookList").click(function (e){
		// 		if ($(e.target).prop("type") === "checkbox") {
		// 			console.log(e.target)
		// 			let totalMoney = bookListTotalMoney();
		// 			$("#totalmoney").html(totalMoney.toFixed(2));
		// 		}
		// 		if($(e.target).prop("class") === "reduce"){
		// 			let num = parseInt($(e.target).next().val());
		// 			if(num>0){
		// 				$(e.target).next().val(num-1);
		// 				//获取单价
		// 				let money =parseInt($(e.target).parent().parent().prev().children("#goods_price_544").html()) ;
		// 				//获取个数
		// 				let nums =  $(e.target).next().val();
		// 				//计算总价钱
		// 				let totalMoney =  money*nums;
		// 				//更改页面的值
		// 				$(e.target).parent().parent().next().children().html(totalMoney);
		// 				//  $(e.target).parent().parent().next().next().children("#goods_sum_544").val(totalMoney);
		// 				//修改总金额
		// 				let totalMoney1 = bookListTotalMoney();
		// 				$("#totalmoney").html(totalMoney1.toFixed(2));
		// 				//获取点击的购物车编号
		// 				let cartidString =  $(e.target).parent().parent().parent().children(0).children().val();
		// 				//更新购物车
		// 				updateBookNum(cartidString,nums);
		//
		// 			}
		// 		}
		// 		if($(e.target).prop("class") === "add"){
		// 			let num = parseInt($(e.target).prev().val());
		// 			$(e.target).prev().val(parseInt(num)+1);
		// 			//获取单价
		// 			let money =parseInt($(e.target).parent().parent().prev().children("#goods_price_544").html()) ;
		// 			//获取个数
		// 			let nums =  $(e.target).prev().val();
		// 			//计算总价钱
		// 			let totalMoney =  money*nums;
		// 			//更改页面的值
		// 			$(e.target).parent().parent().next().children().html(totalMoney.toFixed(2));
		// 			// $(e.target).parent().parent().next().next().children("#goods_sum_544").val(totalMoney);
		// 			// $("#totalmoney").html(totalMoney);
		// 			//修改总金额
		// 			let totalMoney1 = bookListTotalMoney();
		// 			$("#totalmoney").html(totalMoney1.toFixed(2));
		// 			//获取点击的购物车编号
		// 			let cartidString =  $(e.target).parent().parent().parent().children(0).children().val();
		// 			//更新购物车
		// 			updateBookNum(cartidString,nums);
		// 		}
		// 	})
			function bookListTotalMoney(){
				let $obj = $("input[type='checkbox']:checked");
				let totalMoney = 0;
				$.each($obj,function(index,item) {
					let money = $(this).parent().parent().children(5).children("#goods_sum_544.red2").html();
					totalMoney+=parseInt(money);
				});
				return totalMoney;
			}
			//点击去结算，跳转页面功能
			function finish(){
				let $obj = $("input[type='checkbox']:checked");
				let val = "";
				$.each($obj,function(index,item) {
					val += $(this).val()+",";
				});
				let ids = val.substring(0,val.length-1);
				location.href="order_check.html?ids="+ids;
			}
			function updateBookNum(cartidString,nums){

				$.ajax({
					url:"cart.do",
					type: "post",
					data:{
						method: "updateCart",
						cartid:cartidString,
						booknum: nums
					},
					dataType: "json",
					success:function (result){
						if(result==200){
							alert(result.message);
						}
					}

				})
			}
		})
	</script>
	</body>

</html>
